<template>
	<view class="tasks-page">
		<!-- 背景层 -->
		<!-- <view class="bg-layer" :style="{ backgroundImage: 'url(' + bgImage + ')' }"></view> -->
		<navgats :images="img"></navgats>
		<!-- 半透明遮罩 -->
		<!-- <view class="overlay"></view> -->

		<!-- 顶部导航栏 -->
		<!-- <view class="navbar"> -->
		<!-- <view class="back-btn" @click="navigateBack">
        <i class="fa fa-arrow-left"></i>
      </view>
      <view class="title">任务中心</view>
      <view class="help-btn" @click="showHelp">
        <i class="fa fa-question-circle"></i>
      </view> -->
		<!-- </view> -->

		<!-- 任务分类标签 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
				全部任务
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'daily' }" @click="switchTab('daily')">
				每日任务
				<view class="badge" v-if="dailyAvailable > 0">{{ dailyAvailable }}</view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'beginner' }" @click="switchTab('beginner')">
				新手任务
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'event' }" @click="switchTab('event')">
				活动任务
			</view>
		</view>

		<!-- 任务进度概览 -->
		<view class="progress-overview" v-if="activeTab !== 'all'">
			<view class="progress-info">
				<view class="progress-title">
					{{ currentTabTitle }} 进度
				</view>
				<view class="progress-stats">
					<span class="completed">{{ completedTasksCount }}</span>
					<span class="total">/{{ totalTasksCount }} 已完成</span>
				</view>
			</view>
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressPercentage + '%' }"></view>
			</view>
			<view class="reward-preview">
				<i class="fa fa-gift"></i>
				<span>完成所有任务可获得: </span>
				<span class="reward-value">{{ tabReward }}</span>
			</view>
		</view>

		<!-- 任务列表 -->
		<scroll-view class="tasks-list" scroll-y>
			<view class="task-card" v-for="(task, index) in filteredTasks" :key="index" :class="{ 
          'task-completed': task.status === 'completed',
          'task-available': task.status === 'available',
          'task-locked': task.status === 'locked'
        }">
				<!-- 任务图标 -->
				<view class="task-icon">
					<i class="fa" :class="task.icon"></i>
				</view>

				<!-- 任务内容 -->
				<view class="task-content">
					<view class="task-title">
						{{ task.title }}
						<view class="task-tag" v-if="task.tag">
							{{ task.tag }}
						</view>
					</view>

					<view class="task-desc">
						{{ task.description }}
					</view>

					<!-- 任务进度 -->
					<view class="task-progress" v-if="task.progress !== undefined && task.status !== 'locked'">
						<view class="progress-text">
							{{ task.progress }}/{{ task.target }}
						</view>
						<view class="progress-bar-small">
							<view class="progress-fill-small"
								:style="{ width: (task.progress / task.target) * 100 + '%' }"></view>
						</view>
					</view>

					<!-- 任务奖励 -->
					<view class="task-reward">
						<i class="fa fa-medal"></i>
						<span>{{ task.reward }}</span>
					</view>
				</view>

				<!-- 任务操作按钮 -->
				<view class="task-action">
					<button class="action-btn" :class="{
              'btn-claim': task.status === 'completed',
              'btn-start': task.status === 'available',
              'btn-locked': task.status === 'locked'
            }" @click="handleTaskAction(task)" :disabled="task.status === 'locked'">
						<i class="fa" :class="{
							'fa-play': task.status === 'available',
							'fa-gift': task.status === 'completed',
							'fa-lock': task.status === 'locked'
						}"></i>
						<span>{{ getActionText(task.status) }}</span>
					</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredTasks.length === 0">
				<i class="fa fa-tasks"></i>
				<view class="empty-text">暂无任务</view>
				<view class="empty-subtext">请稍后再来查看</view>
			</view>
		</scroll-view>

		<!-- 任务完成奖励弹窗 -->
		<view class="reward-popup" v-if="showRewardPopup" :class="{ 'popup-visible': rewardPopupVisible }">
			<view class="popup-header">
				<view class="popup-title">任务完成!</view>
				<view class="close-btn" @click="closeRewardPopup">
					<i class="fa fa-times"></i>
				</view>
			</view>

			<view class="popup-content">
				<view class="task-completed-icon">
					<i class="fa fa-check-circle"></i>
				</view>
				<view class="completed-task-name">
					{{ currentRewardTask.title }}
				</view>
				<view class="reward-description">
					您已成功完成任务，获得以下奖励:
				</view>
				<view class="reward-item">
					<i class="fa fa-medal"></i>
					<span>{{ currentRewardTask.reward }}</span>
				</view>
			</view>

			<view class="popup-actions">
				<button class="claim-reward-btn" @click="claimReward">
					领取奖励
				</button>
			</view>
		</view>

		<!-- 弹窗遮罩层 -->
		<view class="popup-overlay" v-if="showRewardPopup" :class="{ 'overlay-visible': rewardPopupVisible }"
			@click="closeRewardPopup"></view>
	</view>
</template>

<script>
	import navgats from "../../../Component/navgatsmy/navgatsmy.vue"
	export default {
		data() {
			return {
				// 背景图（用户可替换）
				bgImage: '',
				img: "https://img.jingkakeji.com/img/static/renwu.png",
				// 活跃标签
				activeTab: 'all',

				// 每日任务可完成数量
				dailyAvailable: 2,

				// 任务弹窗状态
				showRewardPopup: false,
				rewardPopupVisible: false,
				currentRewardTask: {},

				// 任务列表
				tasks: [
					// 每日任务
					{
						id: 1,
						type: 'daily',
						title: '每日签到',
						description: '每日登录平台进行签到',
						icon: 'fa-calendar-check-o',
						progress: 0,
						target: 1,
						reward: '20 开箱币',
						status: 'available',
						tag: '简单'
					}

				]
			};
		},
		components: {
			navgats
		},
		computed: {
			// 过滤显示的任务
			filteredTasks() {
				if (this.activeTab === 'all') {
					return this.tasks;
				}
				return this.tasks.filter(task => task.type === this.activeTab);
			},

			// 当前标签页标题
			currentTabTitle() {
				const titles = {
					'daily': '每日任务',
					'beginner': '新手任务',
					'event': '活动任务'
				};
				return titles[this.activeTab] || '任务';
			},

			// 已完成任务数量
			completedTasksCount() {
				return this.filteredTasks.filter(task => task.status === 'completed').length;
			},

			// 总任务数量
			totalTasksCount() {
				return this.filteredTasks.length;
			},

			// 任务进度百分比
			progressPercentage() {
				if (this.totalTasksCount === 0) return 0;
				return Math.round((this.completedTasksCount / this.totalTasksCount) * 100);
			},

			// 标签页完成奖励
			tabReward() {
				const rewards = {
					'daily': '200 开箱币 + 高级武器箱',
					'beginner': '500 开箱币 + 稀有武器箱',
					'event': '专属皮肤 + 1000 开箱币'
				};
				return rewards[this.activeTab] || '丰厚奖励';
			}
		},
		onLoad() {
			// 这里可以从用户提供的地方获取背景图
			this.bgImage = 'https://img.jingkakeji.com/img/static/yonghusdf.png';

			// 监听窗口大小变化
			uni.onWindowResize(this.handleWindowResize);
		},
		onUnload() {
			// 移除窗口大小变化监听
			uni.offWindowResize(this.handleWindowResize);
		},
		methods: {
			// 处理窗口大小变化
			handleWindowResize() {
				// 可以在这里添加响应式调整逻辑
			},

			// 切换标签
			switchTab(tab) {
				this.activeTab = tab;
			},

			// 获取任务操作按钮文本
			getActionText(status) {
				const texts = {
					'available': '进行中',
					'completed': '领取',
					'locked': '未解锁'
				};
				return texts[status] || '操作';
			},

			// 获取任务操作按钮图标
			getActionIcon(status) {
				const icons = {
					'available': 'fa-play',
					'completed': 'fa-gift',
					'locked': 'fa-lock'
				};
				return icons[status] || 'fa-gear';
			},

			// 处理任务操作
			handleTaskAction(task) {
				if (task.status === 'completed') {
					// 显示领取奖励弹窗
					this.currentRewardTask = task;
					this.showRewardPopup = true;
					setTimeout(() => {
						this.rewardPopupVisible = true;
					}, 50);
				} else if (task.status === 'available') {
					// 模拟任务进度更新
					if (task.progress < task.target) {
						task.progress = Math.min(task.progress + 1, task.target);

						// 如果达到目标，标记为已完成
						if (task.progress >= task.target) {
							task.status = 'completed';

							// 更新每日可完成任务数量
							if (task.type === 'daily') {
								this.dailyAvailable = Math.max(0, this.dailyAvailable - 1);
							}
						}

						// 显示提示
						uni.showToast({
							title: task.progress < task.target ?
								`任务进度: ${task.progress}/${task.target}` : '任务已完成，可领取奖励',
							icon: 'none'
						});
					}
				} else if (task.status === 'locked') {
					uni.showToast({
						title: '完成前置任务即可解锁',
						icon: 'none'
					});
				}
			},

			// 领取奖励
			claimReward() {
				// 模拟领取奖励
				uni.showToast({
					title: `成功领取 ${this.currentRewardTask.reward}`,
					icon: 'success'
				});

				// 关闭弹窗
				this.closeRewardPopup();
			},

			// 关闭奖励弹窗
			closeRewardPopup() {
				this.rewardPopupVisible = false;
				setTimeout(() => {
					this.showRewardPopup = false;
				}, 300);
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 显示帮助信息
			showHelp() {
				uni.showModal({
					title: '任务帮助',
					content: '完成任务可以获得开箱币和武器箱奖励。每日任务每天凌晨刷新，活动任务有时间限制，请及时完成。',
					showCancel: false,
					confirmText: '我知道了'
				});
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 */
	.tasks-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
	}

	/* 背景层 */
	.bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		z-index: 0;
		filter: brightness(0.3);
	}

	/* 遮罩层 */
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, rgba(10, 10, 20, 0.8), rgba(10, 10, 30, 0.95));
		z-index: 1;
	}

	/* 导航栏 */
	.navbar {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 16px;
		color: #fff;
	}

	.back-btn,
	.help-btn {
		position: absolute;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 18px;
	}

	.back-btn {
		left: 16px;
	}

	.help-btn {
		right: 16px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	/* 标签栏 */
	.tabs {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: row;
		height: 48px;
		background-color: rgba(15, 15, 30, 0.6);
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		overflow-x: auto;
		white-space: nowrap;
	}

	.tab-item {
		flex: 1;
		min-width: 80px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.7);
		font-size: 14px;
		position: relative;
		padding: 0 8px;
	}

	.tab-item.active {
		color: #00f0ff;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: linear-gradient(90deg, #00f0ff, #0077ff);
	}

	/* 进度概览 */
	.progress-overview {
		position: relative;
		z-index: 3;
		padding: 16px;
		background-color: rgba(20, 20, 40, 0.3);
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		margin-bottom: 12px;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.progress-title {
		font-size: 16px;
		color: #fff;
		font-weight: 500;
	}

	.progress-stats {
		display: flex;
		align-items: center;
	}

	.completed {
		color: #00f0ff;
		font-weight: 600;
		font-size: 16px;
	}

	.total {
		color: rgba(255, 255, 255, 0.6);
		margin-left: 4px;
	}

	.progress-bar {
		height: 8px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 12px;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #00f0ff, #0077ff);
		border-radius: 4px;
		transition: width 0.5s ease;
	}

	.reward-preview {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
	}

	.reward-preview .fa {
		color: #ffd700;
		margin-right: 6px;
	}

	.reward-value {
		color: #00f0ff;
		font-weight: 500;
		margin-left: 4px;
	}

	/* 任务列表 */
	.tasks-list {
		position: relative;
		z-index: 3;
		width: 100%;
		min-height: calc(100vh - 146px);
		background-color: rgba(0, 0, 0, 0.3);
		/* padding: 12px 16px 20px; */
	}

	.task-card {
		display: flex;
		flex-direction: row;
		padding: 16px;
		border-radius: 10px;
		margin-bottom: 12px;
		background-color: rgba(20, 20, 40, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.05);
		transition: all 0.2s ease;
	}

	.task-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}

	.task-card.task-completed {
		background-color: rgba(10, 40, 20, 0.4);
		border-color: rgba(0, 255, 100, 0.2);
	}

	.task-card.task-locked {
		background-color: rgba(20, 20, 30, 0.3);
		filter: grayscale(0.6);
	}

	.task-icon {
		width: 48px;
		height: 48px;
		border-radius: 10px;
		background-color: rgba(0, 240, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #00f0ff;
		font-size: 22px;
		margin-right: 14px;
		flex-shrink: 0;
	}

	.task-card.task-completed .task-icon {
		background-color: rgba(0, 255, 100, 0.1);
		color: #00ff66;
	}

	.task-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.task-title {
		font-size: 16px;
		color: #fff;
		font-weight: 500;
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.task-tag {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 12px;
		margin-left: 8px;
		margin-top: 2px;
	}

	.task-tag[text="简单"] {
		background-color: rgba(0, 255, 100, 0.2);
		color: #00ff66;
	}

	.task-tag[text="普通"] {
		background-color: rgba(255, 215, 0, 0.2);
		color: #ffd700;
	}

	.task-tag[text="新手"] {
		background-color: rgba(0, 140, 255, 0.2);
		color: #0094ff;
	}

	.task-tag[text="活动"] {
		background-color: rgba(255, 69, 0, 0.2);
		color: #ff6347;
	}

	.task-desc {
		font-size: 13px;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 10px;
		line-height: 1.5;
	}

	.task-progress {
		width: 100%;
		margin-bottom: 8px;
	}

	.progress-text {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.5);
		margin-bottom: 4px;
		display: flex;
		justify-content: space-between;
	}

	.progress-bar-small {
		height: 6px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 3px;
		overflow: hidden;
	}

	.progress-fill-small {
		height: 100%;
		background: linear-gradient(90deg, #00f0ff, #0077ff);
		border-radius: 3px;
		transition: width 0.5s ease;
	}

	.task-card.task-completed .progress-fill-small {
		background: linear-gradient(90deg, #00ff66, #00cc52);
	}

	.task-reward {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #ffd700;
	}

	.task-reward .fa {
		margin-right: 6px;
	}

	.task-action {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10px;
	}

	.action-btn {
		padding: 8px 14px;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.action-btn .fa {
		margin-right: 6px;
		font-size: 12px;
	}

	.btn-start {
		background-color: rgba(0, 240, 255, 0.2);
		color: #00f0ff;
		border: 1px solid #00f0ff;
	}

	.btn-start:hover {
		background-color: rgba(0, 240, 255, 0.3);
		box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
	}

	.btn-claim {
		background-color: rgba(0, 255, 100, 0.2);
		color: #00ff66;
		border: 1px solid #00ff66;
	}

	.btn-claim:hover {
		background-color: rgba(0, 255, 100, 0.3);
		box-shadow: 0 0 10px rgba(0, 255, 100, 0.3);
	}

	.btn-locked {
		background-color: rgba(80, 80, 100, 0.2);
		color: rgba(255, 255, 255, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	/* 空状态 */
	.empty-state {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
		color: rgba(255, 255, 255, 0.4);
	}

	.empty-state .fa {
		font-size: 60px;
		margin-bottom: 16px;
		opacity: 0.3;
	}

	.empty-text {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.empty-subtext {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.3);
	}

	/* 奖励弹窗 */
	.reward-popup {
		position: fixed;
		z-index: 100;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		width: 90%;
		max-width: 400px;
		background-color: rgba(15, 15, 30, 0.98);
		border-radius: 16px;
		padding: 24px;
		color: #fff;
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.reward-popup.popup-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -50%) scale(1);
	}

	.popup-header {
		position: relative;
		text-align: center;
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.popup-title {
		font-size: 20px;
		font-weight: 600;
		color: #00f0ff;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-bottom: 24px;
	}

	.task-completed-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: rgba(0, 255, 100, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #00ff66;
		font-size: 32px;
		margin-bottom: 16px;
	}

	.completed-task-name {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 12px;
	}

	.reward-description {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.7);
		margin-bottom: 16px;
	}

	.reward-item {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #ffd700;
		font-weight: 500;
		padding: 8px 16px;
		background-color: rgba(255, 215, 0, 0.1);
		border-radius: 8px;
	}

	.reward-item .fa {
		margin-right: 8px;
	}

	.popup-actions {
		display: flex;
		justify-content: center;
	}

	.claim-reward-btn {
		width: 100%;
		padding: 12px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		border: none;
		background: linear-gradient(90deg, #00f0ff, #0077ff);
		color: #fff;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.claim-reward-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
	}

	/* 弹窗遮罩层 */
	.popup-overlay {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.popup-overlay.overlay-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* 徽章样式 */
	.badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: #00f0ff;
		color: #0a0a14;
		font-size: 11px;
		font-weight: 600;
		margin-left: 6px;
	}

	/* 响应式调整 */
	@media screen and (max-width: 320px) {
		.task-card {
			padding: 12px;
		}

		.task-icon {
			width: 40px;
			height: 40px;
			font-size: 18px;
		}

		.action-btn {
			padding: 6px 10px;
			font-size: 12px;
		}
	}

	@media screen and (min-width: 768px) {
		.tasks-list {
			padding: 16px 24px 24px;
		}

		.task-card {
			padding: 20px;
			margin-bottom: 16px;
		}

		.task-title {
			font-size: 17px;
		}

		.task-desc {
			font-size: 14px;
		}
	}
</style>